<template>
  <div>
    name:<input v-model="username">{{ username }}<br/>
    salary:<input v-model="salary" type="number">{{ salary }}<br/>
    <button>submit</button>
    <button v-on:click="add_salary">+1000</button>
    <br/>
    <br/>
    <hr/>
    <br/>
    <br/>

    <div>
      <h2 class="我的个人信息"></h2>
      <p>age: <input type="number"></p>
      <p>sex: <input type="radio" name="male" value="male">男<input type="radio" name="female" value="female">女</p>
      <p>work: <select name="work" id="">
        <option value="developer">开发</option>
        <option value="tester">测试</option>
        <option value="maintain">运维</option>
      </select></p>
      <p>技术：</p>
      <p>个人信息汇总：</p>
    </div>
  </div>
</template>

<script lang="ts">
// export default用于导出一个默认的模块，可以导出一个/多个对象，也可以导出一个函数
// 通过export default，你可以将这个组件导出，并在其他地方使用它。
// 如：import MyComponent from './App.vue'; MyComponent是在App.vue中通过export default导出的默认内容

  export default{
    data(){
      return{
        username:'xzh',
        salary:16666,
        userInfo:{
          age:0,
          sex:'male',
          skills:['Java','Python','JavaScript','Vue']

        }
      }
    },

    methods:{
      add_salary(){
        this.salary += 1000
      }
    }
  }
</script>

<style scoped>

</style>
